<template>
  <div class="drawer">
    <resize-observer @notify="handleResize" />
    <div class="container" ref="containerRef">
      <slot></slot>
    </div>
  </div>
</template>
<style lang="less" scoped>
.drawer {
  position: relative;
  height: 100%;
  width: 100%;
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: yellow;
    overflow: hidden;
    .left-area {
      width: 200px;
      height: 100%;
      background-color: green;
      float: left;
    }
    .left-btn,
    .right-btn {
      width: 10px;
      height: 100%;
      background-color: red;
    }
    .middle-area {
      width: calc(100% - 200px - 200px);
      height: 100%;
    }
    .right-area {
      width: 200px;
      height: 100%;
      background-color: blue;
      float: right;
    }
  }
}
</style>
<script>
import { debounce } from "lodash";
export default {
  name: "drawer",
  data() {
    return {
      size: {
        w: 0,
        h: 0,
      },
    };
  },
  watch: {
    "$store.state.drawer.itemWidth": {
      handler() {
        this.$nextTick(() => {
          this.$store.commit("setItemSize", {
            itemPos: "center",
            type: "width",
            value: this.setCenterWidth(),
          });
        });
      },
      deep: true,
    },
    "$store.state.drawer.itemHeight": {
      handler() {
        this.$nextTick(() => {
          this.$store.commit("setItemSize", {
            itemPos: "center",
            type: "height",
            value: this.setCenterHeight(),
          });
        });
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    setCenterWidth() {
      // eslint-disable-next-line
      // debugger;
      const { left, right } = this.$store.state.drawer.itemWidth;
      const { left: bl, right: br } = this.$store.state.drawer.btnWidth;
      return this.$refs.containerRef.clientWidth - left - right - bl - br;
    },
    setCenterHeight() {
      // eslint-disable-next-line
      // debugger;
      const { top, bottom } = this.$store.state.drawer.itemHeight;
      const { top: bt, bottom: bb } = this.$store.state.drawer.btnHeight;
      return this.$refs.containerRef.clientHeight - top - bottom - bt - bb;
    },
    handleResize: debounce(function({ width, height }) {
      const { w, h } = this.size;
      if (width !== w) {
        this.$store.commit("setItemSize", {
          itemPos: "center",
          type: "width",
          value: this.setCenterWidth(),
        });
      }
      if (height !== h) {
        this.$store.commit("setItemSize", {
          itemPos: "center",
          type: "height",
          value: this.setCenterHeight(),
        });
      }
      this.size = { w: width, h: height };
    }, 300),
  },
};
</script>
